<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
 <li v-for="item in books">{{item}}</li>
  <h2>总价格：{{totalPrice}}</h2>
</div>
  <script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      books:[
        {id: 100,name: 'java',price: 30},
        {id: 111,name:'深入理解计算机原理',price: 50},
        {id: 112,name:'操作系统',price:70}
      ]
    },
    computed:{
      totalPrice:function (){

        // let result = 0;
        // for (let i = 0;i<this.books.length;i++){
        //   result +=this.books[i].price;
        // }
        // return  result;

      //  使用redce方法
        return this.books.reduce(0,price,)
      }
    },
    methods:{

    }

  })
</script>

</body>
</html>